<template>
  <div v-if="isExpand">
    <a-comment>
      <template #avatar>
        <a-avatar v-if="user.isLogin" :size="40" :src="user.avatar" alt="Han Solo"/>
        <a-avatar v-else :size="40">登录</a-avatar>
      </template>
      <template #content>
        <a-form-item>
          <a-textarea v-model:value="commentVal" :rows="3"/>
        </a-form-item>
        <a-form-item>
          <div class="more">
            <div class="emoji" @click="showEmoji=!showEmoji">
              <i class="iconfont icon-emoji" style="font-size: 20px"></i>
            </div>
            <a-button html-type="submit" type="primary" @click="comment(item.id)">
              发布
            </a-button>
          </div>
          <div v-if="showEmoji" class="emojiList">
            <EmojiPicker :native="true" style="margin: 0" @select="onVue3EmojiPicker"/>
          </div>
        </a-form-item>
      </template>
    </a-comment>
    <!--一级评论-->
    <CommentParent ref="CommentParentRef"
                   :ParentAdd="add"
                   :TreeId="item.id"
                   :data="changeList(item.comment)"
    ></CommentParent>

  </div>
</template>
<script setup>
import {getCurrentInstance, ref} from 'vue'
import CommentParent from "./components/commentParent.vue";
import "vue3-emoji-picker/css";
import EmojiPicker from "vue3-emoji-picker";
import {useStore} from "@/store/user.js";

const {proxy} = getCurrentInstance();
const user = useStore()
const props = defineProps({
  item: {
    type: Object,
    default: {}
  },
  isExpand: {
    type: Boolean,
    default: false
  },
  add: {
    type: Function,
    default: () => {
    }
  }
})
const CommentParentRef = ref(null);
let isExpand = ref(props.isExpand);
let commentVal = ref('')
let showEmoji = ref(false)
const changeExpand = () => {
  isExpand.value = !isExpand.value
}
// 添加isReply作为中枢 实现单个回复
const changeList = (arr) => {
  if (!Array.isArray(arr)) return arr;
  const newList = arr.map(item => {
    return {...item, isReply: false};
  });
  return ref(newList).value;
}
// 发表评论
const comment = async (id) => {
  props.add({
    treeId: id,
    user: user.userId,
    content: commentVal.value
  })
  commentVal.value = ''
}
// 输入emoji标签
const onVue3EmojiPicker = (emoji) => {
  commentVal.value += emoji.i;
}

defineExpose({changeExpand})
</script>
<style lang="scss" scoped>
.more {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .emoji {
    cursor: pointer;
  }
}

:deep(.ant-comment-inner) {
  padding: 15px 0 0;


}

</style>